<!--
 * @Date: 2022-05-09 14:46:54
 * @Author: 陶子
 * @LastEditTime: 2022-07-14 13:52:55
 * @FilePath: \jk_one-stop_cloud_mobile_v1.0\src\views\baseManagement\maintain\malfunctionRepair\newRepair.vue
 * @pageName: 这是--(新建报修)--页面
-->
<template>
  <div>
    <Navbar appTitle="新建报修" />
    <div class="search-content wrap-apply"
      :style="{top: GLOBAL.currentEnvironment ? '0' : '',height: GLOBAL.currentEnvironment ? '100vh' : 'calc(100vh - 1.12rem)',paddingBottom: GLOBAL.currentEnvironment ? '0.66rem' : ''}">
      <van-cell-group style="margin-top:0.1rem">
        <p class="label required FormTit"><span></span>故障设备</p>
        <scanInput ref="scanInput" :columns="columns" placeholder='请扫码/选择' @changeScan="changeScan" />
        <div class="bottomLine"></div>
      </van-cell-group>
      <van-cell-group>
        <p class="label FormTit"><span></span>设备类别</p>
        <van-field readonly v-model="buildForm.deviceCategoryText" placeholder="请选择故障设备" />
        <div class="bottomLine"></div>
      </van-cell-group>
      <van-cell-group>
        <p class="label FormTit"><span></span>紧急程度</p>
        <van-field-select-picker :supportClear='true' label="" placeholder="请选择" v-model="buildForm.urgency" :columns="urgentList"
          :option="{ label: 'text', value: 'value' }" />
        <div class="bottomLine" style="margin-top:0.01rem"></div>
      </van-cell-group>
      <van-cell-group>
        <p class="label FormTit"><span></span>发生时间</p>
        <van-field is-link readonly name="picker" v-model="buildForm.happenTime" @click="timePickShow = true" placeholder="请选择">
        </van-field>
        <div class="bottomLine"></div>
      </van-cell-group>
      <van-cell-group>
        <p class="label required FormTit"><span></span>故障描述</p>
        <van-field v-model="buildForm.faultDescription" rows="2" autosize label="" type="textarea" maxlength="500" placeholder="请输入" show-word-limit />
        <div class="bottomLine"></div>
      </van-cell-group>
      <van-cell-group>
        <!-- <upload iconType="fj" @fileChange="fileChange" :fileIds="attachment" /> -->
        <fileSelector
          iconType="fj"
          :title="'附件'"
          @fileChange="fileChange"
          :fileIds="attachment"
        ></fileSelector>
      </van-cell-group>
      <div style="margin-top: 0.12rem">
        <Examine @submitProcess="submitProcess" @getUserState="getUserState" type="0" :key="examKey" id="MESS_DEVICE_REPAIR" ref="examine" />
        <div style="height: 0.26rem"></div>
      </div>
      <div class="search-bottoms">
        <span class="btnconfirm" @click="btnConfirm()">提交</span>
      </div>
    </div>
    <!--选择出库日期 -->
    <van-popup v-model="timePickShow" position="bottom">
      <van-datetime-picker @confirm="confirmPick" v-model="happenTime" @cancel="cancelPick" type="datetime" title="发生时间" :formatter="formatter" />
    </van-popup>
  </div>
</template>
<script>
import { ajaxGetDictItems } from "@/api/api";
import Navbar from "@/components/navBar/navBar_right";
import scanInput from "@/components/scanCode/scanInput";
import upload from "@/components/upload/upload";
import VanFieldSelectPicker from "@/components/ActionSheet/VanFieldSelectPicker";
import Examine from "@/components/examine";
import { messDeviceQueryById } from "@/api/mobile";
import moment from "moment";
import { APILX } from "@/api/requestLx";
import { repairAdd } from "@/api/mobile";
import fileSelector from "@/components/fileSelector.vue";
export default {
  name: "search",
  components: {
    upload,
    VanFieldSelectPicker,
    Navbar,
    scanInput,
    Examine,
    fileSelector
  },
  data() {
    return {
      timePickShow: false,
      buildForm: {
        deviceId: "",
        deviceCategoryText: "",
        urgency: undefined,
        happenTime: null,
        faultDescription: "",
      },
      happenTime: new Date(),
      urgentList: [], //紧急程度列表
      columns: [],
      attachment: "", //附件
      examKey: 1,
      showPeopleSlect: false,
    };
  },
  computed: {},
  beforeRouteLeave(to, from, next) {
    if (this.showPeopleSlect) {
      this.$refs.examine.closePicker();
      next(false);
    } else {
      next();
    }
  },
  created() {
    let currentTime = new Date();
    this.buildForm.happenTime = moment(currentTime).format("YYYY-MM-DD HH:mm");
    ajaxGetDictItems("mess_repair_urgent_level", null).then((res) => {
      if (res.success) {
        this.urgentList = res.result;
      }
    });
    if (this.$route.query.formPage == "scanCode" && this.$route.query.code) {
      this.deviceId = this.$route.query.code.id;
      this.changeScan({ code: this.$route.query.code }, "scan");
    }
    this.getInitData();
  },
  methods: {
    //页面加载请求数据
    getInitData() {
      APILX.messDeviceList({ pageSize: 999, pageNo: 1 }).then((res) => {
        if (res.success) {
          this.columns = [];
          for (let item of res.result.records) {
            let obj = {
              key: `${item.deviceCode}-${item.deviceName}`,
              value: item.id,
              deviceCategoryText: item.deviceCategoryText,
            };
            this.columns.push(obj);
          }
        } else {
          this.$toast(res.message);
        }
      });
    },
    getUserState(v) {
      this.showPeopleSlect = v;
    },
    // 确定选择时间
    confirmPick(date) {
      this.buildForm.happenTime = moment(date).format("YYYY-MM-DD HH:mm");
      this.timePickShow = false;
    },
    // 取消选择时间
    cancelPick() {
      this.timePickShow = false;
    },
    changeScan(v, opratorType) {
      console.log(v, opratorType, "获取扫码组件数据");
      //value是下拉选择后值,code是扫码获得的值，根据qrcode判断是否隐藏当前页面只显示相机页
      if (opratorType == "select" && this.buildForm.deviceId != v.value) {
        this.buildForm.deviceId = v.value;
        this.buildForm.deviceCategoryText = v.deviceCategoryText || '--';
      }
      if (opratorType == "scan") {
        if (v.code.EntityType != "device") {
          this.$toast("请扫正确二维码");
          return;
        }
        this.buildForm.deviceId = v.code.id;
        let obj = {
          id: v.code.id, // 设备id,用id查设备详情做回显
        };
        messDeviceQueryById(obj).then((res) => {
          if (res.code == 200) {
            this.buildForm.deviceCategoryText = res.result.deviceCategoryText || '--';
            let scanObj = {
              id: this.buildForm.deviceId,
              orderCode: `${res.result.deviceCode}-${res.result.deviceName}`,
            };
            this.$refs.scanInput.propValue(scanObj);
          }
        });
      }
    },

    fileChange(ids) {
      this.attachment = ids;
      console.log("父组件" + ids); //你要保存的fileids
    },
    // 提交
    btnConfirm() {
      if (!this.buildForm.deviceId) {
        this.$toast("请选择故障设备");
        return;
      }
      if (!this.buildForm.faultDescription) {
        this.$toast("请输入故障描述");
        return;
      }
      this.submitProcess();
    },
    submitProcess(e) {
      if (e && e.nodeDtos) {
        // 获取到数据后写表单提交的方法
        this.handleSubmit(e);
      } else {
        // 调用子组件的方法获取数据
        this.$refs.examine.confirm();
      }
    },
    handleSubmit(processDataVo) {
      let params = {
        ...this.buildForm,
        attachment: this.attachment,
        processDataVo: processDataVo,
      };
      params.happenTime = moment(params.happenTime).format(
        "YYYY-MM-DD HH:mm:ss"
      );
      repairAdd(params).then((res) => {
        if (res.success) {
          this.$toast("故障报修成功");
          this.$router.go(-1);
        } else {
          this.$toast(res.message);
        }
      });
    },
    formatter(type, val) {
      if (type === "year") {
        return val + "年";
      }
      if (type === "month") {
        return val + "月";
      }
      if (type === "day") {
        return val + "日";
      }
      if (type === "hour") {
        return val + "时";
      }
      if (type === "minute") {
        return val + "分";
      }
      return val;
    },
  },
};
</script>
<style lang="scss" scoped>
@import "@/assets/theme.scss";
.search-content {
  //  padding-bottom: 0.5rem;
  position: fixed;
  top: 0.42rem;
  width: 100%;
  height: calc(100vh - 1.12rem);
  background: #f5f5f5;
  overflow: scroll;
  z-index: 99;
  .formgroup {
    background: #ffffff;
    // padding: 0 0.16rem;
    margin-top: 0.1rem;
    margin-bottom: 0.2rem;
    padding-top: 0.1rem;

    .title {
      width: 0.58rem;
      height: 0.14rem;
      font-size: 0.15rem;
      font-family: PingFang SC;
      font-weight: 400;
      color: #191f25;
      line-height: 0.05rem;
      margin-left: 0.16rem;
    }
  }
}
.bottomLine {
  height: 0.01rem;
  background-color: #f0f0f0;
  margin: 0 0.16rem;
}
.otherText {
  padding-bottom: 0.16rem;
  font-size: 0.16rem;
  font-weight: bold;
  color: #191f25;
}
.haveUnitBox {
  display: flex;
  justify-content: space-between;
  align-items: center;
  box-sizing: border-box;
  padding-right: 0.16rem;
  /deep/ .van-cell {
    padding-right: 0;
    width: 2.6rem;
  }
  /deep/ .van-field__control {
    max-width: 3rem;
  }
}
/deep/ .van-nav-bar {
  z-index: 99;
}
.search-bottoms {
  width: 100%;
  height: 0.5rem;
  background: #ffffff;
  display: flex;
  justify-content: space-between;
  align-items: center;
  position: fixed;
  bottom: 0px;
  padding: 0rem 0.11rem;
  box-sizing: border-box;
  font-size: 0.16rem;
  font-weight: 500;
  z-index: 9;
  .btncancel {
    flex: 1;
    background: #f6f6f6;
    border: 0.01rem solid rgba(25, 31, 37, 0.12);
    box-sizing: border-box;
    height: 0.39rem;
    display: flex;
    justify-content: center;
    align-items: center;
    border-radius: 0.03rem;
    margin-right: 0.11rem;
    color: #191f25;
  }
  .btnconfirm {
    flex: 1;
    background: #1890ff;
    box-sizing: border-box;
    height: 0.39rem;
    display: flex;
    justify-content: center;
    align-items: center;
    border-radius: 0.03rem;
    color: #ffffff;
  }
}
</style>
